//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin data-grid() {
    /* ==========================================================================
       Data grid default

       Default Mendix data grid widget. The data grid shows a list of objects in a grid
    ========================================================================== */

    .mx-datagrid {
        table {
            border-width: 0;
            background-color: transparent;
            /* Table header */
            th {
                border-style: solid;
                border-color: $grid-border-color;
                border-top-width: 0;
                border-right: 0;
                border-bottom-width: 1px;
                border-left: 0;
                background-color: $grid-bg-header;
                padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                vertical-align: middle;

                .mx-datagrid-head-caption {
                    white-space: normal;
                }
            }

            /* Table Body */
            tbody tr {
                td {
                    @include transition();
                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                    vertical-align: middle;
                    border-width: 0;
                    border-color: $grid-border-color;
                    border-bottom-width: 1px;
                    border-bottom-style: solid;
                    background-color: $grid-bg;

                    &:focus {
                        outline: none;
                    }

                    /* Text without spaces */
                    .mx-datagrid-data-wrapper {
                        text-overflow: ellipsis;
                    }
                }

                &.selected td,
                &.selected:hover td {
                    color: $grid-selected-color;
                    background-color: $grid-bg-selected !important;
                }
            }

            /* Table Footer */
            tfoot {
                > tr > th {
                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                    border-width: 0;
                    background-color: $grid-footer-bg;
                }

                > tr > td {
                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                    border-width: 0;
                    background-color: $grid-bg;
                    font-weight: $font-weight-bold;
                }
            }

            & *:focus {
                outline: 0;
            }
        }
    }
}
